import {Component, Input, OnInit} from '@angular/core';
import {UtilComponent} from '../../interface/util-component.interface';
import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View.js';
import XYZ from 'ol/source/XYZ';
import {OSM} from 'ol/source';
import {get as getProjection} from 'ol/proj';
import {getCenter} from 'ol/extent';

@Component({
    selector: 'kylin-layer-clipping',
    templateUrl: './layer-clipping.component.html',
    styleUrls: ['./layer-clipping.component.less']
})
export class LayerClippingComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;
    view: View;
    originView;
    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //

    osm: any;
    constructor() {
    }

    layer;

    ngOnInit() {

        const originView = this.map.getView();
        this.originView = {
            center: originView.getCenter(),
            zoom: originView.getZoom(),
            proj: originView.getProjection()
        };


        this.map.getView().setMinZoom(0);
        this.map.removeLayer(this.map.getLayers().getArray()[0]);
        this.layer =  new TileLayer({
            source: new OSM()
        });
        this.map.addLayer(this.layer);

        this.layer.on('precompose', (event) => {
            const ctx = event.context;
            ctx.save();
            const pixelRatio = event.frameState.pixelRatio;
            const size = this.map.getSize();
            ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio);
            ctx.scale(3 * pixelRatio, 3 * pixelRatio);
            ctx.translate(-75, -80);
            ctx.beginPath();
            ctx.moveTo(75, 40);
            ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
            ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
            ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
            ctx.clip();
            ctx.translate(75, 80);
            ctx.scale(1 / 3 / pixelRatio, 1 / 3 / pixelRatio);
            ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio);
        });

        this.layer.on('postcompose', (event) => {
            const ctx = event.context;
            ctx.restore();
        });
    }

    cancel(options?: any): any {
        this.map.removeLayer(this.layer);
        const tileLayer = new TileLayer({
            source: new XYZ({
                crossOrigin: 'anonymous',
                url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            })
        });
        this.map.addLayer(tileLayer);
        this.view =  new View({
            zoom: this.originView.zoom,
            center: this.originView.center,
            projection: this.originView.proj,
            minZoom: 0
        });
        this.map.setView(this.view);
    }

}
